<!--数据库浏览弹窗-->
<template>
  <el-dialog
    :visible.sync="explorerDialog"
    center
    destroy-on-close
    :close-on-click-modal="false"
    custom-class="customDialog"
    width="350px"
  >
    <div slot="title" class="dialog-title">
      <svg-icon slot="prefix" icon-class="database" />
      <span>{{ databaseInfo.name }}</span>
    </div>
    <el-container style="height: 450px">
      <el-main
        class="body-warp"
        style="height: 100%; padding:5px;  padding-left:15px; padding-bottom:2px;"
      >
        <el-tree
          ref="leftTree"
          :props="treeProps"
          node-key="id"
          highlight-current
          :expand-on-click-node="false"
          :default-expanded-keys="['root']"
          :current-node-key="'root'"
          lazy
          :load="funLoadNode"
        >
          <span class="custom-tree-node" slot-scope="{data }">
              <svg-icon slot="prefix" :icon-class="data.icon?data.icon:'database'" />
            <span>{{ data.text }}</span>
          </span>
        </el-tree>
      </el-main>
      <el-footer class="dialog-footer  base-button">
        <el-button @click="explorerCancel">取消</el-button>
        <el-button type="primary" @click="explorerOk">确定</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import { apiDatabase } from "@/api/etl/database";

export default {
  name: "explorerDialog",
  data() {
    return {
      explorerDialog: false,
      treeProps: {
        label: "text",
        children: "children"
      },
      rootList: [
        { text: "模式", id: "schema" },
        { text: "表", id: "table",icon:'table' },
        { text: "视图", id: "view" ,icon:'view'},
        { text: "同义词", id: "synonym" }
      ],
      databaseInfo: {}
    };
  },
  methods: {
    //打开窗口
    explorerOpen(databaseInfo) {
      this.databaseInfo = databaseInfo;
      this.explorerDialog = true;
    },
    explorerCancel() {
      this.explorerDialog = false;
    },
    //浏览确定
    explorerOk() {
      this.explorerDialog = false;
    },
    funLoadNode(node, resolve) {
      if (node.level === 0) {
        //root
        return resolve(this.rootList);
      }
      //加载数据
      apiDatabase
        .explorer(JSON.stringify(this.databaseInfo), node.key)
        .then(res => {
          return resolve(res.data);
        })
        .catch(() => {
          return resolve([]);
        });
    }
  }
};
</script>

<style scoped></style>
